Adobe Extension 開発準備 備忘録
最近 Adobe Extension 触ったので準備段階を備忘録として記録。ちなみに作成した環境はwindows。
対象にした環境はPhotoshop。ほかのAdobe製品向けの開発を触る機会が発生したら追記するかも。
/icons/hr.icon
Adobe 製品のツールはゲーム開発の現場だと3Dデータほどの効率化の機会も少ない。でもたまにほしいといわれる。
AdobeExtensionはAdobe全般のツールのＵＩ作成に利用出来るっぽい。情報源の多くがＤＴＰやウェブに関わる人が書いていた記事だった。個人的な事を言えば、現在所属している会社は２Ｄのワークや出版に近しい分野で成り立っている部門もあるので備えておくが吉だと考えている。
自由度もデザイン性も良好な仕組みなので、Substanceの拡張も将来的にできるといいな。
基礎知識
/icons/hr.icon
Adobe Extensionについて
Adobe Color テーマとかに使われてる、ドッキングできるこのUIのこと
https://gyazo.com/b267a05b746af88da90b3e04ea8ad038
エクステンションのUIはCEP(Common Extensibility Platform)というHTML/CSS/Javascriptで記載できるCEPというフレームワークで作成できる。
Photoshop のExtension
常駐型のツールを作るうえでエクステンションはPhotoshopに関しては必須になってくる。(他のAdobeスクリプトの現状はよく知らないが)
Photoshopでよく利用されているスクリプトによる作業効率化の手段として ファイル → スクリプト → 参照 からJavascriptを読み込み処理を行うやり方がある。
このJavascript、windowを一応生成できるのだが現在、調べた限りではダイアログ形式以外での生成に対応していない模様なのである。ダイアログ生成中はレイヤーへの書き込みやウィンドウの移動などの、多くの機能がロックされてしまう。
そのため単発使用のものにしか使われない事が多い。
なのでPhotoshopにおいてはツールを制作するうえで覚えておく必要がある。
環境の準備
/icons/hr.icon
Adobe Brackets
WEB開発で（多分）人気のテキストエディタ
開発中のWEBサービスをブラウザで直接テストできるようで本当に便利そうだった。
拡張機能にPhotoshop用のExtension開発テンプレートを作成してくれるものがあり、これを利用する。
https://gyazo.com/8463d6489cb34bc68d3cf398ee6f49d8
記事作成時、 adobe extensionで検索するとCEP7のものとCEP8のものがあった。
CEPのバージョンはPhotoshopCC2017だとCEP7、Photoshop2019だとCEP8
Photoshop2017で試した時はCEP7の方だけが正常に起動できたがPhotoshop2019ならCEP7のものでもCEP8のものでも動いた。厳密には判らないがmanifest.xmlの中身がこの二つで異なってた。
今回はPhotoshopCC2019で試したのでCEP8のもので試す。
Photoshopをデバックモードにする
エクステンションは最終的に開発完了したデータをデジタル署名データと一緒にすることで完成になる。デジタル署名データが無いとデフォルトのPhotoshopだと開けない。
Photoshopをデバッグモードで起動するとこの署名がない開発中のものでも開けるようになる。
コルタナに「regedit」と入力するとレジストリエディタが開ける。
レジストリエディタ内、
コンピューター/HKEY_CURRENT_USER/Software/Adobe
に、Photohospのバージョンに応じてCSXS.~みたいなフォルダがある。PhotoshopCC2019ならCSXS.9
選択したら格納データが表示されている場所を右クリックして
新規 → 文字列値
新しいレジストリキーが作成されるのでダブルクリックして値を1に設定
https://gyazo.com/4dfc4b5b3f19cc4a8d6de09d54f639be
これで無署名のエクステンションをPhotoshopが開けるようになる
hello world
/icons/hr.iconでは実際にエクステンションを作成していく
テンプレートを作成
https://gyazo.com/0e6de03d1b75953862717f91a5d616a5
拡張機能をBracketsにインストールするとメニューにExtension Builderが増えているのでそこからNew CC Extensionをクリック
https://gyazo.com/986f1648e494460d1b7830884c373e50
Extension NameはPhotoshop上での表示名称、Extension IDはたぶん内部的な管理ID。
エクステンションは
%HOMEPATH%\AppData\Roaming\Adobe\CEP\extensions
に作成される。このパスに置かれていればすべてのバージョンのPhotoshopCCから参照できる。
結構沢山のデータが生成される。
https://gyazo.com/628c5020d9f052cf8fb0287079c698f3
読み込みの設定が格納されているmanifest.xmlというファイルがあるので
<Host Name="~" Version="~" /> という行がふたつあるので両方の行のバージョンの値の右側を19.9に変更。
これは読み込めるPhotoshopのバージョンの範囲を表してるらしい。
今回のPhotoshopCC2019なら20.0 ~ 20.9なので
にすれば動く なんで19.0~19.9じゃないんだ、分かりづらいわ。
https://gyazo.com/782e1a2b2e8d693bdc0742167de48e26
無事、PhotoshopCC2019 を開くと
ウィンドウ/エクステンション/ に追加されている。
https://gyazo.com/81021615ec5a4204f6ece7f4e631b28f
hellow worldいけた
読み込まれていないならばmanifestr.xml、起動を断られたらレジストリエディタのデバックモード設定が間違ってると思う。
この先の事について
/icons/hr.icon
Photoshop状までの起動まではできたのでこの先は、
実際に開発する
デジタル証明書を発行してデバックモード状態じゃなくても起動できるようにする
に続く。
開発はHTML/CSS/JavascriptとJavascriptからPhotoshopの関数を実行できるExtend Script(.jsx)で作成していくことになる。
証明書発行がまた一問着あるが長くなったので今回は割愛。気が向いたら書く。
感想
/icons/hr.icon
↓ 触ってみたら何でも出来そうで驚いた。
Adobe製品のツール要望があまりないのってエクステンションを含む機能を提供した経験のある人がゲーム業界に少ないだけで、機能をイメージできないだけなんじゃなかろうかという考えになった。
ブラウザで提供できるものは提供できるわけで、要は３Dとかもいけてしまう。
Adobe製品のユーザー数に対してツール自体が少なく、完全にブルーオーシャンなので機会を見つけて自主的に提案していこうと思う。